body {
	font-family: Cambria, Arial;
	background: #333;
}

.tabs {
	width: 100%;
	max-width: 600px;
	margin: 50px auto;
}

input {
	opacity: 0;
}

label {
	cursor: pointer;
	background: -webkit-linear-gradient(#666, #555);
	color: #eee;
	border-radius: 5px 5px 0 0;
	padding: 1.5% 3%;
	float: left;
	margin-right: 2px;
	font: italic 1em cambria;
}

label:hover {
	background: -webkit-linear-gradient(#777, #666);
}

input:checked+label {
	background: #fff;
	color: #333;
}

.tabs input:nth-of-type(1):checked ~ .panels .panel:first-child, .tabs input:nth-of-type(2):checked 
	~ .panels .panel:nth-child(2), .tabs input:nth-of-type(3):checked ~
	.panels .panel:nth-child(3), .tabs input:nth-of-type(4):checked ~
	.panels .panel:last-child {
	opacity: 1;
	-webkit-transition: .3s;
}

.panels {
	float: left;
	clear: both;
	position: relative;
	width: 100%;
	background: #fff;
	border-radius: 0 10px 10px 10px;
	min-height: 315px;
}

.panel {
	width: 100%;
	opacity: 0;
	position: absolute;
	background: #fff;
	border-radius: 0 10px 10px 10px;
	padding: 4%;
	box-sizing: border-box;
}

.panel h2 {
	margin: 0;
	font-family: Arial;
}